<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册账号 - AI简历生成应用</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 添加Font Awesome图标库 -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      .h-11 {
        height: 2.75rem;
      }
    </style>
  </head>
  <body class="bg-gray-50 min-h-screen flex flex-col px-4 pt-14">
    <!-- 添加顶部导航栏 -->
    <div class="bg-white shadow fixed top-0 left-0 right-0 z-10">
      <div class="h-14 flex items-center justify-center relative px-4 max-w-md mx-auto">
        <a href="login.html" class="absolute left-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-600"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15 19l-7-7 7-7"
            />
          </svg>
        </a>
        <h1 class="text-lg font-medium">注册账号</h1>
      </div>
    </div>
    
    <div class="max-w-md mx-auto w-full mt-6">
      <!-- 注册表单 -->
      <div class="p-2">
        <form id="register-form">
          <!-- 手机号码 -->
          <div class="mb-4">
            <label for="phone" class="block text-gray-600 mb-2">手机号码</label>
            <input
              type="tel"
              id="phone"
              placeholder="请输入手机号码"
              class="w-full h-11 px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-purple-600 focus:border-purple-600"
              required
            />
          </div>

          <!-- 验证码 -->
          <div class="mb-4">
            <label for="verification-code" class="block text-gray-600 mb-2"
              >验证码</label
            >
            <div class="flex">
              <input
                type="text"
                id="verification-code"
                placeholder="请输入验证码"
                class="flex-1 h-11 px-3 py-2 border border-gray-200 rounded-l-md focus:outline-none focus:ring-1 focus:ring-purple-600 focus:border-purple-600"
                required
              />
              <button
                type="button"
                id="send-code-btn"
                class="h-11 px-4 bg-purple-100 text-purple-600 border border-l-0 border-purple-200 rounded-r-md font-medium hover:bg-purple-200 transition"
              >
                获取验证码
              </button>
            </div>
          </div>

          <!-- 设置密码 -->
          <div class="mb-4">
            <label for="password" class="block text-gray-600 mb-2"
              >设置密码</label
            >
            <input
              type="password"
              id="password"
              placeholder="请设置密码，不少于6位"
              class="w-full h-11 px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-purple-600 focus:border-purple-600"
              required
              minlength="6"
            />
          </div>

          <!-- 确认密码 -->
          <div class="mb-4">
            <label for="confirm-password" class="block text-gray-600 mb-2"
              >确认密码</label
            >
            <input
              type="password"
              id="confirm-password"
              placeholder="请再次输入密码"
              class="w-full h-11 px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-1 focus:ring-purple-600 focus:border-purple-600"
              required
            />
          </div>

          <!-- 用户协议 -->
          <div class="mt-4 mb-6 text-sm">
            <label class="text-gray-600 flex items-start">
              <input
                type="checkbox"
                id="agreement"
                class="mt-1 mr-2"
                required
              />
              <span>
                我已阅读并同意
                <a href="#" class="text-purple-600">《用户协议》</a>和
                <a href="#" class="text-purple-600">《隐私政策》</a>
              </span>
            </label>
          </div>

          <button
            type="submit"
            class="w-full bg-purple-600 text-white h-11 rounded-md font-medium hover:bg-purple-700 transition"
          >
            立即注册
          </button>
        </form>
    </div>

    <!-- 验证码倒计时和表单提交处理 -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const sendCodeBtn = document.getElementById("send-code-btn");
        const phoneInput = document.getElementById("phone");
        const registerForm = document.getElementById("register-form");
        const passwordInput = document.getElementById("password");
        const confirmPasswordInput =
          document.getElementById("confirm-password");

        // 发送验证码并开始倒计时
        sendCodeBtn.addEventListener("click", function () {
          const phone = phoneInput.value.trim();

          // 简单的手机号验证
          if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
            alert("请输入正确的手机号码");
            return;
          }

          // 模拟发送验证码
          this.disabled = true;
          let countdown = 60;
          this.textContent = `${countdown}秒后重发`;

          const timer = setInterval(() => {
            countdown--;
            this.textContent = `${countdown}秒后重发`;

            if (countdown <= 0) {
              clearInterval(timer);
              this.disabled = false;
              this.textContent = "获取验证码";
            }
          }, 1000);

          // 在实际应用中，这里应该发送请求到服务器获取验证码
          console.log("发送验证码到：", phone);
        });

        // 表单提交
        registerForm.addEventListener("submit", function (e) {
          e.preventDefault();

          // 密码一致性验证
          if (passwordInput.value !== confirmPasswordInput.value) {
            alert("两次输入的密码不一致");
            return;
          }

          // 模拟注册成功
          alert("注册成功，即将跳转到登录页面");

          // 跳转到登录页面
          setTimeout(() => {
            window.location.href = "login.html";
          }, 1000);

          // 在实际应用中，这里应该发送注册请求到服务器
          console.log("注册信息提交");
        });
      });
    </script>
  </body>
</html>
